<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="修改栏目开放时间"
      :footer="null"
      @cancel="cancel"
      class="addForm"
    >
      <a-form-model
        ref="ruleForm"
        :model="params"
        :rules="rules"
        class="joinForm"
        v-bind="layout"
      >
        <a-form-model-item ref="status" label="开放时间设置" prop="status">
          <a-select v-model="params.status">
            <a-select-option value="1"> 长期开放 </a-select-option>
            <a-select-option value="0"> 暂不开放 </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <div class="btnClass">
        <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
        <a-button type="primary" class="commonBtn" @click="confirmClick"
          >确认</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
import { editTimeManageStatus } from '@/api/timeManage'
export default {
  props: {
    id: [String, Number]
  },
  data() {
    return {
      Visible: true,
      params: {
        status: '',
      },
      rules: {
        status: [
          { required: true, message: '请选择开放时间!', trigger: 'blur' }
        ],
      },
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      confirmDirty: false
    }
  },
  mounted() { },
  methods: {
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    cancel() {
      this.$emit('cancel')
    },
    confirmClick() {
      editTimeManageStatus({ ...this.params, id: this.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功!')
          this.$emit('addSuccess')
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
